<!--
 * @Author: your name
 * @Date: 2021-11-13 14:18:32
 * @LastEditTime: 2021-11-16 08:52:23
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \haha\vue_admin\src\components\Pie\index.vue
-->
<template>
  <div>
    <div id="main" :style="{ width: width, height: height }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      options: {
        title:{
          text:this.title,
          subtext: this.time,
          show:true,
        },
        tooltip: {
          trigger: "item",
           formatter:function(e){
               return e.data.name + '消费了' + e.data.value + '元\n' + "占比" + e.percent + '%'
           }
        },
        series: [
          {
            type: "pie",
            data: this.pie,
            name:'haha',
              label: {
                show: true,
              },

          },
        ],
      },
    };
  },
  props: {
    pie: {
      type: Array,
      required: false,
    },
    width: {
      type: String,
      default: "600px",
    },
    height: {
      type: String,
      default: "400px",
    },
    title:{
      type:String,
      default:'饼图'
    },
    time:{
      type:String,
      required:false,
      default:'2011-01-01'
    }
  },
  mounted() {
    this.set();
  },

  methods: {
    set() {
      var myEcharts = echarts.init(document.getElementById("main"));
      myEcharts.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
